<template>
  <div class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="编号规则" prop="sampleNum">
          <el-input v-model="queryForm.sampleNum" placeholder="编号规则" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>

      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >新增</el-button
        >
        <el-button
          v-rights="'Export'"
          icon="el-icon-document-copy"
          type="primary"
          @click="exportData"
          >导出</el-button
        >
      </div>

      <el-main class="roller_main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="待办" name="first">
            <SampleScrapCommission
              v-if="activeName == 'first'"
              ref="SampleScrapCommission"
              :filter-form.sync="filterForm"
              :page-info.sync="pagination"
              :total.sync="pagination.total"
            />
          </el-tab-pane>
          <el-tab-pane label="已办" name="second">
            <SampleScrapFinished
              v-if="activeName == 'second'"
              ref="SampleScrapFinished"
              :filter-form.sync="filterForm"
              :page-info.sync="pagination"
              :total.sync="pagination.total"
            />
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <SampleScrapEdit
      v-if="dialogFormVisible"
      ref="SampleScrapEdit"
      :dialog-form-visible.sync="dialogFormVisible"
      :row-data.sync="rowData"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import { deleteRecord } from "../../../api/SampleManage/SampleScrap.js";
import SampleScrapEdit from "./SampleScrapEdit.vue";
import SampleScrapCommission from "./SampleScrapCommission.vue";
import SampleScrapFinished from "./SampleScrapFinished.vue";

export default {
  name: "SampleScrapList",
  components: { SampleScrapEdit, SampleScrapCommission, SampleScrapFinished },
  data() {
    return {
      loading: true,
      list: [],
      queryForm: {
        sampleNum: "",
      },
      activeName: "first",
      filterForm: {
        sampleManageStatusCode: "",
      },
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      rowData: [],
    };
  },
  created() {
    if (this.activeName === "first") {
      this.filterForm.finishedState = "0";
      this.filterForm.sampleManageStatusCode = 30;
    } else {
      this.filterForm.finishedState = "1";
      this.filterForm.sampleManageStatusCode = 40;
    }
  },
  methods: {
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    // 导出
    exportData() {
      if (this.activeName !== "second") {
        this.$message({
          message: "请选择已办数据",
          type: "warning",
        });
        return false;
      }
      if (
        this.$refs.SampleScrapFinished.tableDatas === null ||
        this.$refs.SampleScrapFinished.tableDatas.length === 0
      ) {
        this.$message.error("请选择数据");
        return false;
      }
      var tableData = this.$refs.SampleScrapFinished.tableDatas;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "委托单号",
          "样品编号",
          "样品名称",
          "报废数量",
          "报废日期",
          "报废类型",
        ];
        const filterVal = [
          "orderNum",
          "sampleNum",
          "sampleName",
          "sampleScrapCount",
          "sampleScrapDate",
          "sampleScrapType",
        ];
        const data = this.formatJson(filterVal, tableData);
        excel.export_json_to_excel({
          header: tHeader, // 表头
          data, // 数据
          filename: "样品报废", // 导出文件名
          autoWidth: true, // 导出宽度自动
          bookType: "xlsx", // 导出后缀
        });
      });
    },
    closeDialog() {
      this.dialogFormVisible = false;
      this.getList();
    },
    handleClick() {
      this.pagination = {
        pageIndex: 1,
        pageSize: 10,
      };
      if (this.activeName === "first") {
        this.filterForm.finishedState = "0";
        this.filterForm.sampleManageStatusCode = 30;
      } else {
        this.filterForm.finishedState = "1";
        this.filterForm.sampleManageStatusCode = 40;
      }
    },

    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      if (this.activeName === "first") {
        this.filterForm.finishedState = "0";
        this.filterForm.sampleManageStatusCode = 30;
        this.$refs.SampleScrapCommission.getList();
      } else {
        this.filterForm.finishedState = "1";
        this.filterForm.sampleManageStatusCode = 40;
        this.$refs.SampleStoreFinished.getList();
      }
    },
    onNew() {
      if (this.activeName !== "first") {
        this.$message.warning("请选择待办");
        return false;
      }
      if (this.$refs.SampleScrapCommission.tableDatas.length > 0) {
        this.rowData = this.$refs.SampleScrapCommission.tableDatas;
        this.dialogFormVisible = true;
      } else {
        this.$message.warning("请选择待办数据");
        return false;
      }
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData) {
      this.$refs.SampleScrapEdit.formData = rowData;
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.getList();
    },
  },
};
</script>
